<template>
  <div style="height: 100vh; overflow-y: auto;">
    <h2>会员设置</h2>
    <el-table :data="sortedPricing" style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="order_name" label="名称" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              size="small"
              v-model="scope.row.order_name"
              placeholder="请输入名称"
              @blur="updatepice('order_name', scope.row.id, scope.row.order_name)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="order_price" label="价格" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              type="number"
              size="small"
              v-model="scope.row.order_price"
              placeholder="请输入价格"
              @blur="updatepice( 'order_price', scope.row.id, scope.row.order_price)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="order_time" label="时间" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              size="small"
              v-model="scope.row.order_time"
              placeholder="YYYY-MM-DD"
              @blur="updatepice( 'order_time', scope.row.id, scope.row.order_time)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="is_show" label="是否显示" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-switch
              v-model="scope.row.is_show"
              @change="updatepice('is_show', scope.row.id, scope.row.is_show)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="times" label="有效时间(天)" sortable @sort-change="handleSortChange">
        <template #default="scope">
          <el-input
              type="number"
              size="small"
              v-model="scope.row.times"
              placeholder="请输入天数"
              @blur="updatepice( 'times', scope.row.id, scope.row.times)"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="deletepic( scope.row.id)" type="text" style="color: red">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from "@/api/api.js";

export default {
  data() {
    return {
      pricing: [],
      sortColumn: '',
      sortOrder: '',
    }
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      this.sortColumn = prop;
      this.sortOrder = order;
    },
    loadData() {
      api.get('/admin/pricing').then(response => {
        this.pricing = response.data.data;
      }).catch(error => {
        console.error("Error loading pricing data:", error);
      });
    },
    updatepice(field, id, value) {
      api.put('/admin/pricing/' + id, { [field]: value }).then(response => {
        if (response.data.code === 0) {

          this.$message.success('更新成功');
        }
        this.loadData();

      }).catch(error => {
        console.error("Error updating pricing data:", error);
      });
    },
    deletepic(id) {
      api.delete('/admin/pricing/' + id).then(response => {
        if (response.data.code === 0) {
          this.$message.success('删除成功');
        }
        this.loadData();
      }).catch(error => {
        console.error("Error deleting pricing data:", error);
      });
    }
  },

  computed: {
    sortedPricing() {
      let sorted = [...this.pricing];

      if (this.sortColumn) {
        sorted.sort((a, b) => {
          if (this.sortOrder === 'ascending') {
            return a[this.sortColumn] > b[this.sortColumn] ? 1 : -1;
          } else {
            return a[this.sortColumn] < b[this.sortColumn] ? 1 : -1;
          }
        });
      }
      return sorted;
    }
  },

  mounted() {
    this.loadData();
  },
}
</script>

<style scoped>
/* 添加需要的样式 */
</style>
